<template>
  <div class="card">
    <div class="title">添加茶种</div>
    <div class="body">
      <div class="base-message">
        <el-form label-width="150px" :model="formData" label-position="left">
          <el-form-item label="品种名称（中文名）">
            <el-input
              v-model="formData.chineseName"
              placeholder="请输入中文名！"
              style="width: 280px"
            ></el-input>
          </el-form-item>
          <el-form-item label="品种名称（拉丁名）">
            <el-input
              v-model="formData.latinName"
              placeholder="请输入拉丁名！"
              style="width: 280px"
            ></el-input>
          </el-form-item>
          <el-form-item label="等级">
            <el-select v-model.number="formData.grade" placeholder="请选择">
              <el-option
                v-for="item in gradeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否珍贵品种">
            <el-radio v-model="formData.rareVariety" label="1" border
              >是</el-radio
            >
            <el-radio v-model="formData.rareVariety" label="0" border
              >否</el-radio
            >
          </el-form-item>
          <el-form-item label="种植时间">
            <el-date-picker
              v-model="formData.growYear"
              value-format="yyyy-MM-dd"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="来源地">
            <v-distpicker
              @selected="onSelected"
              :province="formData.province"
              :city="formData.city"
              :area="formData.county"
            >
            </v-distpicker>
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input
              v-model="formData.address"
              placeholder="请输入详细地址！"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="品种介绍">
            <div>
              <que-editor :content.sync="formData.varietyIntroduce" />
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { province } from "@/datas/index";
import SelectArea from "./components/select-area";
// 1、引入VueUeditorWrap组件
import QueEditor from "@components/Editor/index";

export default {
  components: {
    SelectArea,
    QueEditor,
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      gradeList: [
        {
          value: "国家级",
          label: "国家级",
        },
        {
          value: "省级",
          label: "省级",
        },
      ],
      province,
      formData: {},
    };
  },
  methods: {
    onSelected(val) {
      console.log(val);
      const { province, city, area } = val;
      this.form.province = province.value;
      this.form.city = city.value;
      this.form.county = area.value;
      console.log(val.city.code); //  打印出城市的code
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  /*background:rgba(255,255,255,1);*/
  border: 1px solid rgba(211, 211, 211, 1);
  .title {
    width: 100%;
    height: 48px;
    background: rgba(241, 245, 249, 1);
    border: 1px solid rgba(211, 211, 211, 1);
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(27, 33, 63, 1);
    display: flex;
    align-items: center;
    padding-left: 32px;
  }
  .body {
    width: 100%;
    padding: 60px;
    .base-message {
    }
  }
}
</style>
